<template>
    <el-row :gutter="20" class="mb12">
        <el-col :span="12">
            <div style="width: 100%; height: 28px">
                <slot />
            </div>
        </el-col>
        <el-col :span="12">
            <el-button-group style="float: right">
                <!-- <slot name="rightToolbar"></slot> -->
                <div class="top-right-btn">
                    <el-row>
                        <el-tooltip
                            v-if="hasSearch"
                            class="item"
                            effect="dark"
                            :content="showSearch ? '隐藏搜索' : '显示搜索'"
                            placement="top"
                        >
                            <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
                            <el-popover placement="bottom-start" title="显隐列" width="230" trigger="click">
                                <el-table
                                    :data="columns"
                                    @selection-change="selectChange"
                                    size="mini"
                                    :max-height="350"
                                    ref="selectionTable"
                                >
                                    <el-table-column type="selection" width="50"></el-table-column>
                                    <el-table-column width="150" prop="label" label="列名"></el-table-column>
                                </el-table>
                                <el-button size="mini" slot="reference" circle icon="el-icon-menu" />
                            </el-popover>
                        </el-tooltip>
                    </el-row>
                </div>
            </el-button-group>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'tableBtn',
    props: {
        showSearch: {
            type: Boolean,
            default: true
        },
        columns: {
            type: Array,
            default: () => []
        },
        hasSearch: {
            type: Boolean,
            default: true
        }
    },
    components: {},
    data() {
        return {
            // 显隐数据
            value: [],
            // 弹出层标题
            title: '显示/隐藏',
            // 是否显示弹出层
            open: false
        }
    },
    created() {},
    mounted() {
        // 默认全部选中
        this.columns.forEach((item) => {
            this.$refs.selectionTable.toggleRowSelection(item, true)
        })
    },
    methods: {
        // 搜索
        toggleSearch() {
            this.$emit('update:showSearch', !this.showSearch)
        },
        // 刷新
        refresh() {
            this.$emit('queryTable')
        },
        // 右侧列表元素变化
        dataChange(data) {
            console.log(data)
            for (var item in this.columns) {
                console.log('key', this.columns[item].key)
                const key = this.columns[item].key
                this.columns[item].visible = !data.includes(key)
            }
        },
        // 打开显隐列dialog
        showColumn() {
            this.open = true
        },
        selectChange(selections) {
            let ids = selections.map((item) => item.key)
            this.columns.forEach((item) => {
                let key = item.key
                item.visible = ids.includes(key)
            })
        }
    }
}
</script>

<style scoped lang="scss">
.mb12 {
    margin-bottom: 12px;
}
.el-tooltip {
    margin-left: 10px;
}
</style>
